<template>
  <!-- <div class="my-pager"> -->
  <!-- <div class="left">
      <div class="total">共 {{ total }} 条&nbsp;显示{{ startPage }}-{{ endPage }}条</div>
      <div class="total">共 {{ total }} 条记录&nbsp;第{{ currentPage }}&nbsp;/&nbsp;{{ page }}&nbsp;页</div>
    </div>
    <el-pagination
      small
      background
      layout="prev, pager, next, sizes, jumper"
      :page-sizes="[10, 20, 50]"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div> -->
  <div class="pagination-content">
    <div class="total">
      共 {{ total }} 条&nbsp;显示<span v-if="total != 0">{{ startPage }}-{{ endPage }}</span
      ><span v-if="total == 0">0</span>条
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  // 公共组件-分页
  name: 'Pagination',
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  computed: {
    // page() {
    //   return Math.ceil(this.total / this.pageSize)||1
    // },
    startPage() {
      return (this.currentPage - 1) * this.pageSize + 1
    },
    endPage() {
      const curPage = this.currentPage * this.pageSize
      const totalPage = this.total
      return curPage > totalPage ? totalPage : curPage
    }
  },
  data() {
    return {}
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.$emit('size-change', val)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.$emit('current-change', val)
    }
  }
}
</script>

<style lang="less" scoped>
.pagination-content {
  padding: 0 20px;
  box-sizing: border-box;
  height: 40px;
  margin-top: 10px;
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #303133;
  letter-spacing: 0;
  line-height: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  .page {
    display: flex;
    align-items: center;
    margin-right: 70px;
    ::v-deep .el-pagination {
      display: inline-block;
      .el-pagination__jump {
        margin-left: 0;
        margin-top: -2px;
        width: 60px;
        .el-input {
          width: 100%;
        }
      }
      .el-input__inner {
        width: 100%;
        height: 100%;
        font-size: 13px;
      }
      .el-input {
        height: 24px;
      }
      .el-input__suffix {
        right: 6px;
        .el-input__icon {
          height: 24px;
          line-height: 24px;
        }
      }
      .el-pager {
        li {
          height: 24px;
          line-height: 24px;
          margin-right: 20px;
          min-width: 24px;
          color: #303133;
          font-weight: normal;
          &.active {
            width: unset;
          }
        }
        li:last-child {
          margin-right: 6px;
        }
        .active {
          width: 24px;
          height: 24px;
          background: #0160c0;
          border-radius: 2px;
          color: #fff;
        }
      }
      .btn-prev,
      .btn-next {
        width: 24px;
        height: 24px;
        min-width: unset;
        margin-right: 6px;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
      }
      .btn-next {
        padding-left: 6px;
      }
      .el-pagination__sizes {
        margin-top: -2px;
      }
    }
  }
}

// .my-pager {
//   position: relative;
//   color: #303133;
//   font-size: 13px;
//   font-family: PingFangSC-Regular;
//   // margin-top: 10px;
//   padding: 0 20px;
//   background-color: #fff;
//   height: 40px;
//   display: flex;
//   flex-flow: row nowrap;
//   align-items: center;
//   justify-content: center;

//   .left {
//     position: absolute;
//     top: 0;
//     bottom: 0;
//     left: 0;
//     height: 40px;
//     line-height: 40px;
//     font-size: 13px;
//     padding-left: 40px;
//     color: #9c9b9e;
//   }

//   /deep/.el-pagination {
//     display: inline-block;
//     .el-input__inner {
//       height: 22px;
//       font-size: 13px;
//     }
//     .el-input__icon {
//       line-height: 22px;
//     }
//     .el-pagination__jump {
//       margin-left: 0px;
//       font-size: 13px;
//     }
//     .el-pager {
//       .number,
//       .btn-quickprev,
//       .btn-quicknext {
//         background-color: #fff;
//         border: 1px solid #dcdfe6;
//         font-weight: 500;
//       }
//     }
//     .btn-prev,
//     .btn-next {
//       background-color: #fff;
//       border: 1px solid #dcdfe6;
//     }
//   }
// }
</style>
